<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>操作日志</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../assets/layui/css/layui.css" media="all">
</head>
<body>
<fieldset class="layui-elem-field" style="padding-top: 10px;">
    <from class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline" >
                <label class="layui-form-label" style="width: auto;">日期</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" class="layui-input"  autocomplete="off" id="startTime" name="startTime">
                </div>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" class="layui-input" autocomplete="off" id="endTime" name="endTime">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">用户名</label>
                <div class="layui-input-inline" style="width: 130px;">
                    <input type="text" id="userId" name="userId" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">ip地址</label>
                <div class="layui-input-inline" style="width: 130px;">
                    <input type="text" id="userIp" name="userIp" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width: auto;">日志类型</label>
                <div class="layui-input-inline" style="width: 100px;">
                    <select id="logType" name="logType" lay-filter="aihao">
                        <option value=""></option>
                        <option value="2">登录</option>
                        <option value="1">操作</option>
                    </select>
                </div>
            </div>
            <button class="layui-btn layui-btn-normal" data-type="search" id="btnSearch">查询</button>
        </div>
    </from>
</fieldset>
<table class="layui-table" lay-filter="tbFliter" id="tbData" style="margin-top: -25px;">
</table>
<script src="../assets/layui/layui.js"></script>
<script>
    layui.config({
        base: '../js/'
    });
    layui.use(['jquery','table','common','laydate'], function () {
        var table = layui.table,
            common=layui.common,
            laydate=layui.laydate,
            $ = layui.jquery,
            active = {
                search: function () {
                    table.reload("tbOptions", {
                        where: {
                            userId: $("#userId").val(),
                            logType: $("#logType").val(),
                            userIP: $("#userIp").val(),
                            startTime: $("#startTime").val(),
                            endTime: $("#endTime").val(),
                        }
                    });
                }
            };
        var defaultStartTime = common.getTodayStart();
        var defaultEndTime = common.getTodayEnd();
        //日期初始化  第一次查询无法获取到laydate值
        $("#startTime").val(defaultStartTime);
        $("#endTime").val(defaultEndTime);
        laydate.render({
            elem:'#startTime'
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,type: 'datetime'
            ,value:defaultStartTime
        })
        laydate.render({
            elem:'#endTime'
            ,format:'yyyy-MM-dd HH:mm:ss'
            ,type: 'datetime'
            ,value:defaultEndTime
        })
        //表格初始化
        var tbHeight = $(window).height() - 75;
        table.render({
            elem: '#tbData'
            , skin: 'row'
            , height: tbHeight
            , url: 'log/list'
            , page: true
            , cols: [[
                {field: 'userId', title: '账号', width: 120, sort: true,  }
                , {field: 'logType', title: '类型', width: 80,
                    templet:function (e) {
                        if(e.logType==1) return '操作';
                        else if(e.logType==2) return '登录';
                        else if(e.logType==0) return '异常';
                        else return e.logType;
                    }
                }
                , {field: 'createTime', title: '时间', width: 180, sort: true,
                    templet:function (e) {
                        if(e.createTime){
                            return common.formatTimestamp(e.createTime);
                        }
                    }
                }
                , {field: 'userIp', title: 'IP', width: 160}
                , {field: 'moduleName', title: '模块', width: 120}
                , {field: 'action', title: '操作', width: 150}
                , {field: 'info', title: '日志信息', width: 260}
            ]]
            , limits: [10, 20, 50]
            , where: {
                userId: $("#userId").val(),
                logType: $("#logType").val(),
                userIP: $("#userIp").val(),
                startTime: $("#startTime").val(),
                endTime: $("#endTime").val(),
            }
            , id: 'tbOptions'
        });
        //按钮事件绑定
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>